<template>
	<div class="container">
		<div class="part01">
			<span>{{info.type}}</span>
			<span>{{info.lastDate}}</span>
		</div>
		<div class="part02">
			<b><span>{{info.title}}</span></b>
		</div>
		<div class="part03">
			<span>阅读 {{info.read}}</span>
			<span>喜欢 {{info.like}}</span>
			<span>关注 {{focus}}</span>
		</div>
	</div>
</template>
<script>
	export default {
		data: function () {
			return {
				type: '科幻',
				lastDate: '2012-02-02',
				title: 'test',
				read: 39,
				like: 33,
				focus: 42
			}
		},
		props: ['info']
	}
</script>
<style scoped>
	.container {
		border-bottom: 10px solid #ccc;
	}
	.part01 {
		display: flex;
		margin: 10px 0;
		color: #999;
	},
	.part01>span {
		flex: 1;
	}
	.part01>span:first-child {
		text-align: left;
	}
	.part01>span:last-child {
		text-align: right;
	}

	.part02 {
		text-align: center;
		font-size: 2rem;
		padding: 10px 0;
	}

	.part03 {
		margin: 10px auto;
		text-align: center;
	}
	.part03>span {
		padding: 5px;
		color: #999;
	}
</style>